<template>
  <div class="top">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/index">权限</a></el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="middle">
    <div class="search">
      <div class="search-top">
        <span>筛选搜索</span>
        <el-row class="mb-4">
          <el-button>重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </el-row>
      </div>
      <div class="search-bot">
        <span>账号/姓名：</span>
        <el-input
          v-model="keyword"
          placeholder="请输入账号、姓名"
          style="width: 30%"
        />
      </div>
    </div>

    <div class="list">
      <span>数据列表</span>
      <el-row class="mb-4">
        <el-button type="primary">添加</el-button>
      </el-row>
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%; font-size: 12px"
      align="center"
    >
      <el-table-column prop="id" label="编号" align="center" />
      <el-table-column prop="username" label="账号" align="center" />
      <el-table-column prop="nickName" label="姓名" align="center" />
      <el-table-column prop="email" label="邮箱" align="center" />
      <el-table-column label="添加时间" align="center">
        <template #default="scope">
          {{ formatData(scope.row.loginTime) }}
        </template>
      </el-table-column>
      <el-table-column label="最后登录" align="center">
        <template #default="scope">
          {{ formatData(scope.row.loginTime) }}
        </template>
      </el-table-column>
      <el-table-column label="是否启用" align="center">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作 " align="center">
        <template #default="{ row }">
          <el-button>分配角色</el-button>
          <el-button @click="edit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- <-- 分页 -->
  <el-pagination
    v-model:currentPage="pageination.currentPage"
    v-model:page-size="pageination.pageSize"
    :page-sizes="[10, 20, 30, 40]"
    :small="pageination.small"
    :background="pageination.background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageination.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <EditAdmin
    :visible="editAdminVisible"
    :data="editAdminData"
    @close="closeFn"
  />
</template>

<script setup lang="ts">
import type { AdminListType } from "@/request/admin";
import { Ref } from "vue";
import { ref } from "vue";
import * as http from "@/request/http";
import dayjs from "dayjs";
import { userTable } from "@/hooks/component/userTable";
import EditAdmin from "./component/EditAdmin.vue";

const keyword = ref("");
let { tableData, pageination, handleSizeChange, handleCurrentChange } =
  userTable(http.admin.getAdminList, { keyword: keyword.value });

//控制弹框显示隐藏的值
let editAdminVisible = ref(false);
let editAdminData = ref({}) as Ref<AdminListType>;
//点击编辑按钮
function edit() {
  editAdminVisible.value = true;
}
//关闭事件触发的方法
function closeFn() {
  editAdminVisible.value = false;
}

//格式化时间
function formatData(date?: string) {
  if (!date) return "";
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}
</script>

<style scoped>
.middle {
  margin: 20px 25px;
}

.list {
  height: 20px;
  border: 1px solid #eee;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.list > span {
  padding-left: 20px;
  font-size: 14px;
}

.search {
  height: 100px;
  border: 1px solid #eee;
  padding: 20px;
  font-size: 14px;
}
.search-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}
.search-bot {
  padding: 20px 50px;
}

.el-breadcrumb {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.el-pagination {
  float: right;
  padding-right: 30px;
}
</style>
